<template>
  <view class="safe-area-inset-bottom">
    <view class="swip_header">
      <view class="slot-box">
        <uni-search-bar
            v-model="queryParams.companyName"
            @confirm="handleQuery"
            style="width: 100%;"
            @input="handleQuery"
            placeholder="请输入企业名称"/>
      </view>
    </view>
    <view class="listSearchTop">
      <!-- 加入企业 -->
      <uni-card :is-shadow="false" class="card-list">
        <view @click="toOpenAddCompanyDialog(2)" style="margin:30rpx auto 25rpx;">
          <uni-icons type="plusempty" size="18"></uni-icons>
          <p>搜索并加入企业</p>
        </view>
        <view slot="actions" class="card-actions">
          <view class="card-actions-item" @click="toOpenAddCompanyDialog(1)">
            <!-- <uni-icons type="plus" size="18" color="#00a660"></uni-icons> -->
            <text class="card-actions-item-text themeColor" style="font-size: 26rpx;">创建企业</text>
          </view>
          <view class="card-actions-item" @click="toStaffApply">
            <!-- <uni-icons type="list" size="18" color="#00a660"></uni-icons> -->
            <text class="card-actions-item-text themeColor" style="font-size: 26rpx;">加入企业记录</text>
          </view>
        </view>
      </uni-card>
      <!-- 全部企业 -->
      <uni-card :is-shadow="false" v-for="(item,index) in companyList" :key="index" class="card-list">
        <!-- 删除 -->
        <view v-if="item.company.isCertify == 0" class="delete">
          <uni-icons type="closeempty" color="#999999" size="18" @click="toDeleteSeal(item)"></uni-icons>
        </view>
        <!-- 企业信息 -->
        <view class="info">
          <!-- 头像 -->
          <view class="info-left">
            <img :src="(item.company.avatar == null ) ? baseUrlAvatar : ossUrl + item.company.avatar"
                 class="info-img">
          </view>
          <view class="info-right">
            <view class="title">{{ item.company.name }}</view>
            <view class="type">
              <template v-if="item.company.isCertify == 1">
                <template v-if="item.company.adminId == $store.getters.staffInfo.id">
                  <view class="type-admin" style="margin-right: 5rpx;">
                    <i class="iconfont themeColor">&#xe8c8;</i>企业管理员{{ item.adminName }}
                  </view>
                  <view class="type-admin" style="margin-right: 5rpx;">
                    <i class="iconfont themeColor"> &#xe618;</i>已实名认证
                  </view>
                </template>
                <template v-else>
                  <view class="type-admin" style="margin-right: 5rpx;">
                    <i class="iconfont themeColor">&#xe618;</i>已实名认证
                  </view>
                </template>
              </template>
              <template v-else>
                <view class="type-admin" style="margin-right: 5rpx;">
                  <i class="iconfont" style="font-size: 28rpx;margin-right: 5rpx;color:#ccc">&#xe618;</i>未实名认证
                </view>
              </template>
            </view>
          </view>
        </view>
        <!-- 功能 -->
        <view class="list">
          <template v-if="item.company.isCertify == 1">
            <view class="list-item">
              <view class="list-item-left">
                合同签署量剩余<span class="num-red">{{ item.remainingNum }}</span> 次
              </view>
              <view
                  v-if="item.company.adminId == $store.getters.staffInfo.id"
                  class="list-item-right"
                  @click="toCompanyAccount(item)">
                立即购买 >
              </view>
            </view>
            <view class="list-item">
              <view class="list-item-left">合同有纠纷？立即申请存证报告</view>
              <view class="list-item-right" @click="toApply(item)">立即申请 ></view>
            </view>
            <view class="list-item">
              <view class="list-item-left">解锁更多高级功能，提升更高效率</view>
              <view class="list-item-right">升级系统 ></view>
            </view>
          </template>
          <template v-else>
            <view class="list-item">
              <view class="list-item-left">新用户实名认证，即得签署量，免费签署合同！</view>
            </view>
          </template>
        </view>
        <!-- 底部工具 -->
        <view slot="actions" class="card-actions" v-if="item.company.isCertify == 1">
            <view class="card-actions-item" @click="toCompanyConsole(item)">
              <text class="card-actions-item-text themeColor">进入企业控制台</text>
            </view>
            <view class="card-actions-item" @click="toCompanyConsole(item)">
              <text class="card-actions-item-text themeColor">进入企业工作台</text>
            </view>
        </view>
		<view slot="actions" class="card-actions" style="justify-content: center;" v-else>
		    <view class="card-actions-item" @click="enterpriseCertify(item)">
		      <text class="card-actions-item-text errorColor">立即企业认证</text>
		    </view>
		</view>	
      </uni-card>
    </view>
    <!-- 加入企业 -->
    <joinOrCreateCompany ref="inputDialog" @success="getList"/>
    <!-- 企业实名认证弹出框 -->
    <companyRealName ref="companyRealName"/>
  </view>
</template>
<script>
import companyRealName from "@/components/identityPoup/companyRealName"
import {deleteCompany, findAllCompany} from "@/api/ec/common/main";
import {changeUser, changeWork} from "@/api/login";
import {updateSession} from "@/api/ec/person/user/userInfo";
import joinOrCreateCompany from '@/components/joinOrCreateCompany/joinOrCreateCompany'

export default {
  components: {joinOrCreateCompany, companyRealName,},
  data() {
    return {
      // 头像
      baseUrlAvatar: require("@/static/images/company-avatar.png"),
      // oss链接地址
      ossUrl: this.$ossUrl,
      // 企业列表
      companyList: [],
      // 查询参数
      queryParams: {
        companyName: null
      },
      path: null, //切换页面地址
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 立即申请 */
    toApply(item) {
      this.toChangeCompanyPage(item, '/pages/mine/work/evidenceOut/contractSignRecord/index');
    },
    /** 立即企业认证 */
    enterpriseCertify(item) {
      this.$refs.companyRealName.open(item.company.id)
    },
    /** 进入企业个人账户 */
    toCompanyAccount(item) {
      this.toChangeCompanyPage(item, '/pages/mine/work/product/index');
    },
    /** 跳转 */
    toChangeCompanyPage(item, path) {
      this.$modal.loading("加载中，请稍候...");
      // 切换页面地址
      this.path = path;
      // 切换为企业
      changeUser(item.company.id).then(() => {
        // 切换到企业控制台
        changeWork(1).then(() => {
          // 更新最新的用户session信息
          updateSession().then(response => {
            this.$store.dispatch('GetInfo').then((res) => {
              if (this.path == '/pages/index' || this.path == '/pages/mine/index') {
                uni.switchTab({url: this.path});
              } else {
                uni.navigateTo({url: this.path});
              }
            })
          });
        });
      });
    },
    /** 加入企业记录 */
    toStaffApply() {
      uni.navigateTo({url: './staffApply'});
    },
    /** 创建企业 */
    toOpenAddCompanyDialog(type) {
      this.$refs.inputDialog.toOpenDialog(type)
    },
    /** 获取所有企业 */
    getList() {
      this.$modal.loading();
      findAllCompany(this.queryParams).then(response => {
        uni.hideLoading()
        this.companyList = response.data;
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 进入企业控制台 */
    toCompanyConsole(item) {
      this.toChangeCompanyPage(item, '/pages/index');
    },
    /** 进入企业工作台 */
    toCompanyWork(item) {
      this.toChangeCompanyPage(item, '/pages/mine/index');
    },
    /** 删除为认证企业 */
    toDeleteSeal(item) {
      let that = this
      uni.showModal({
        title: '删除企业',
        confirmColor: '#00a660',
        content: '确定要删除 "' + item.company.name + '" 吗？',
        success: function (res) {
          if (res.confirm) {
            let companyId = item.company.id
            const param = {companyId}
            deleteCompany(param).then(response => {
              that.getList()
              that.$modal.msgSuccess("删除成功");
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    /** 搜索企业 */
    handleQuery() {
      this.getList(true)
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: $uni-bg-color-grey;
}

.card-list {
  text-align: center;
  position: relative;
}

.bottom-btn {
  display: flex;
  justify-content: space-between;
  padding: 0 60rpx;
}

.search_btn {
  background: #e6f6ef;
  color: $uni-color-primary;
  font-size: 26rpx;
  margin-right: 0;
  height: 72rpx;
  line-height: 72rpx;
}

.themeColor {
  font-size: 28rpx;
  margin-right: 5rpx;
  color: $uni-color-primary;
}

.btm {
  border-top: 1rpx solid #f2f2f2;
  text-align: center;
  padding: 20rpx 0;
}

.list {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 220rpx;
}

.list .list-item {
  height: 55rpx;
  background: #f7f8fa;
  padding: 0 20rpx;
  line-height: 55rpx;
  margin-bottom: 18rpx;
  display: flex;
}

.list .list-item .list-item-left {
  font-size: 26rpx;
  -webkit-box-flex: 1;
  flex: 1;
  margin-right: 12rpx;
  text-align: left
}

.list .list-item .list-item-left .num-red {
  color: #f5222d;
  padding: 0 5rpx;
}

.list .list-item .list-item-right {
  font-size: 24rpx;
  text-align: right;
  color: $uni-color-primary;
}

.info {
  display: flex;
  padding: 10rpx 0rpx 10rpx 0;
  overflow: hidden;
  margin-bottom: 28rpx;
}

.info .info-left {
  width: 90rpx;
  height: 90rpx;
  margin-right: 20rpx;
  border: 1px solid #ececec;
  border-radius: 50%;
  overflow: hidden;
}

.info .info-left .info-img {
  display: block;
  width: 100%;
  height: 100%;
}

.info .info-right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}

.info .info-right .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  line-height: 28rpx;
  margin-top: 6rpx;
  margin-bottom: 16rpx;
  font-weight: 500;
  text-align: left;
}

.info .info-right .type {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.info .info-right .type .type-admin {
  background: #f5f5f5;
  border-radius: 4rpx;
  height: 40rpx;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 24rpx;
  padding: 0 10rpx;
}

.delete {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  color: #999999;
  font-size: 20rpx;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.find-org-account-btn {
  position: absolute;
  top: 12rpx;
  right: 16rpx;
  z-index: 2;
  font-size: 24rpx;
  padding: 0rpx 20rpx;
  background-color: #e6f6ef;
  border-color: #99dbbf;
  color: $uni-color-primary;
}

.addIcon {
  font-size: 40rpx;
  color: #ccc;
}

.ma_btn {
  background-color: #e6f6ef;
  border-color: #99dbbf;
  color: $uni-color-primary;
  height: 70rpx;
  line-height: 70rpx;
  margin-left: 10rpx;
  font-size: 26rpx;

  .iconfont {
    font-size: 22rpx;
    margin-right: 8rpx;
  }
}
</style>
